<template>
    <div class="shopQualification">

        <!-- Content -->
        <view class="content">
            <!-- Introduction Text -->
            <view class="intro-text">
                根据国家相关政策要求对网店经营者资质信息公示如下:
            </view>

            <!-- Enterprise Business License Card -->
            <view class="qualification-card">
                <view class="card-title">企业法人营业执照</view>
                <view class="license-image-container">
                    <image class="license-image" :src="licenseUrl" mode="widthFix"></image>
                </view>
            </view>

            <!-- Travel Agency License Card -->
            <view class="qualification-card">
                <view class="card-title">旅行社业务经营许可证</view>
                <view class="license-image-container">
                    <image class="license-image" :src="imageUrl" mode="widthFix"></image>
                </view>
            </view>
            <!-- Disclaimer -->
            <view class="disclaimer">
                <text class="disclaimer-text">以上经营信息由卖家自行申报填写。</text>
                <text class="disclaimer-text">如需进一步核实,请联系当地工商行政管理部门或发证机构。</text>
            </view>
        </view>
    </div>
</template>

<script>
import { request } from '@/utils/request.js'
export default {
    data() {
        return {
            licenseUrl: '',//营业执照
            imageUrl: '',//经营许可证
            merchantInfo: {},
            merchantId: ''
        }
    },
    onLoad(options) {
        this.merchantId = options.merchantId
        this.getShopQualification()
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },
        async getShopQualification() {
            await request({
                url: '/merchant/getMerchantById',
                method: 'GET',
                data: {
                    merchantId: this.merchantId
                }
            }).then(res => {
                this.merchantInfo = res.data
            })
            console.log('商户信息', this.merchantInfo)
            this.licenseUrl = this.merchantInfo.licenseUrl
            await request({
                url: '/travel-agency/getByMerchantId',
                method: 'GET',
                data: {
                    merchantId: this.merchantInfo.id
                }
            }).then(res => {
                console.log(res)
                this.imageUrl = res.data.imageUrl
            })
        }
    }
}
</script>

<style scoped>
.shopQualification {
    min-height: 100vh;
    background-color: #f5f5f5;
}

/* Header Styles */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;
}

.header-left {
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    background-color: #ffe8f0;
    border-radius: 30rpx;
}

.back-text {
    margin-left: 10rpx;
    color: #ff6b9d;
    font-size: 28rpx;
}

.header-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20rpx;
}

.menu-dots {
    display: flex;
    gap: 8rpx;
}

.dot {
    width: 8rpx;
    height: 8rpx;
    background-color: #ccc;
    border-radius: 50%;
}

.menu-icon {
    width: 40rpx;
    height: 40rpx;
    background-color: #ff6b9d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle {
    width: 12rpx;
    height: 12rpx;
    background-color: #fff;
    border-radius: 50%;
}

/* Content Styles */
.content {
    padding: 30rpx;
}

.intro-text {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 40rpx;
}

/* Qualification Card Styles */
.qualification-card {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 30rpx;
}

.license-image-container {
    display: flex;
    justify-content: center;
    margin-bottom: 30rpx;
}

.license-image {
    width: 500rpx;
    border-radius: 10rpx;
}

.license-info {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

.info-label {
    font-size: 26rpx;
    color: #666;
}

.info-value {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
}

/* Disclaimer Styles */
.disclaimer {
    margin-top: 40rpx;
    padding: 0 20rpx;
}

.disclaimer-text {
    display: block;
    font-size: 24rpx;
    color: #999;
    line-height: 1.6;
    margin-bottom: 10rpx;
}
</style>